(function (fn) {
    fn();
    setInterval(fn, 1000);
})(function () {
    var dt = new Date();
    document.getElementById("show_time").innerHTML =
        dt.getFullYear() + "-" +
        (dt.getMonth() + 1) + "-" +
        (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()) + " " +
        (dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours()) + ":" +
        (dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes()) + ":" +
        (dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds()) + "";
});
(function () {
    var myChart = echarts.init(document.getElementById('center_bar'));
    const xData = ["洪英妹", "薛安琪", "陈静语", "邓雪萍", "蔡梅花", "欧文熙", "黄淑榕", "田鑫玲", "李鼎炜", "蔡婷婷", "余添招", "林明雪", "黄思菡", "张冉冉", "黄丽君", "陈智勇", "李静", "李舒媛", "陈奕", "陈佳怡"]
    const yData = [10, 10, 8, 9, 13, 13, 15, 8, 11, 7, 15, 14, 13, 10, 8, 10, 14, 13, 12, 8]
    const yData2 = [5, 6, 2, 5, 8, 8, 7, 5, 5, 3, 8, 6, 6, 4, 3, 4, 6, 6, 6, 3]

    const option = {
        tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        grid: {
            left: 15,
            top: 50,
            right: 15,
            bottom: 20,
            containLabel: true
        },
        // legend: {
        //     itemGap: 50,
        //     data: ["膳食指南", "增值"],
        //     textStyle: {
        //         color: "#fff",
        //     },
        // },
        xAxis: [
            {
                type: "category",
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: "#f9f9f9",
                    },
                },
                axisLabel: {
                    interval: 0,
                    color: "#00FFE3",
                    rotate: 45,
                    fontSize: 14,
                },
                axisTick: {
                    show: false,
                },
                data: xData,
            },
        ],
        yAxis: [
            {
                type: "value",
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#0a3256",
                    },
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: "#d1e6eb",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "膳食指南",
                type: "bar",
                label: {
                    show: true,
                    position: "top",
                    formatter: function (param) {
                        return param.value;
                    },
                    textStyle: {
                        color: "#ffffff",
                    },
                },
                barWidth: 12,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        {
                            offset: 0,
                            color: "#00FFE3",
                        },
                        {
                            offset: 1,
                            color: "#4693EC",
                        },
                    ]),
                    barBorderRadius: [30, 30, 30, 30],
                },
                data: yData,
            },
            {
                name: "增值",
                type: "line",
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "#28ffb3", // 线条颜色
                    },
                    borderColor: "#f0f",
                },
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#fff",
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#28ffb3",
                    },
                },
                areaStyle: {
                    //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0,154,120,1)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(0,0,0, 0)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    },
                },
                data: yData2,
            },

        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
(function () {
    var myChart = echarts.init(document.getElementById('center_pie'));
    var img =
        "";
    var trafficWay = [
        {
            name: "第一组",
            value: 50,
            value1: 26,
        },
        {
            name: "第二组",
            value: 54,
            value1: 28,
        },
        {
            name: "第三组",
            value: 60,
            value1: 27,
        },
        {
            name: "第四组",
            value: 57,
            value1: 25,
        },
    ];
    const countObj = {
        0: 26,
        2: 28,
        4: 27,
        6: 25,
    }

    var data = [];
    var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
    ];
    for (var i = 0; i < trafficWay.length; i++) {
        data.push(
            {
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i],
                    },
                },
            },
            {
                value: 2,
                name: "",
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0, 0, 0, 0)",
                        borderColor: "rgba(0, 0, 0, 0)",
                        borderWidth: 0,
                    },
                },
            }
        );
    }
    const option = {
        color: color,
        graphic: {
            elements: [
                {
                    type: "image",
                    z: 3,
                    style: {
                        image: img,
                        width: 100,
                        height: 100,
                    },
                    left: "center",
                    top: "center",
                    position: [100, 100],
                },
            ],
        },
        tooltip: {
            show: false,
        },
        series: [
            {
                name: "",
                type: "pie",
                clockWise: false,
                radius: [65, 69],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: "outside",
                            color: "#fff",
                            formatter: function (params) {
                                if (params.name !== "") {
                                    return (
                                        // "膳食指南" + 
                                        params.name + '：' + params.value + '分' +
                                        "\n" +
                                        "\n" +
                                        "增值：" +
                                        countObj[params.dataIndex]
                                    );
                                } else {
                                    return "";
                                }
                            },
                        },
                        labelLine: {
                            length: 10,
                            length2: 25,
                            show: true,
                            color: "#00ffff",
                        },
                    },
                },
                data: data,
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

(function () {
    var myChart = echarts.init(document.getElementById('one_echarts'));
    const xData = ["第一组", "第二组", "第三组", "第四组"]
    const yData = [251, 271, 260, 265]
    const option = {
        grid: {
            left: 15,
            top: 20,
            right: 15,
            bottom: 0,
            containLabel: true
        },
        tooltip: {
            show: true
        },
        xAxis: {
            data: xData,
            //坐标轴
            axisLine: {
                lineStyle: {
                    color: "#3eb2e8",
                },
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
            },
        },
        yAxis: {
            //坐标轴
            axisLine: {
                show: false,
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
            },
            //分格线
            splitLine: {
                lineStyle: {
                    color: "#4784e8",
                },
            },
        },
        series: [
            {
                name: "",
                tooltip: {
                    show: true,
                },
                type: "bar",
                barWidth: 24.5,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            1,
                            0,
                            0,
                            [
                                {
                                    offset: 0,
                                    color: "#0B4EC3", // 0% 处的颜色
                                },
                                {
                                    offset: 0.6,
                                    color: "#138CEB", // 60% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#17AAFE", // 100% 处的颜色
                                },
                            ],
                            false
                        ),
                    },
                },
                data: yData,
                barGap: 0,
            },
            {
                type: "bar",
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            1,
                            0,
                            0,
                            [
                                {
                                    offset: 0,
                                    color: "#09337C", // 0% 处的颜色
                                },
                                {
                                    offset: 0.6,
                                    color: "#0761C0", // 60% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#0575DE", // 100% 处的颜色
                                },
                            ],
                            false
                        ),
                    },
                },
                barGap: 0,
                data: yData,
            },
            {
                name: "b",
                tooltip: {
                    show: false,
                },
                type: "pictorialBar",
                itemStyle: {
                    borderWidth: 1,
                    borderColor: "#0571D5",
                    color: "#1779E0",
                },
                symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
                symbolSize: ["33", "8"],
                symbolOffset: ["0", "-5"],
                //symbolRotate: -5,
                symbolPosition: "end",
                data: yData,
                z: 3,
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

(function () {
    var myChart1 = echarts.init(document.getElementById('pie1'));
    var myChart2 = echarts.init(document.getElementById('pie2'));
    var myChart3 = echarts.init(document.getElementById('pie3'));
    var myChart4 = echarts.init(document.getElementById('pie4'));
    const obj1 = {
        radius: ["30%", "34%"],
        center: ["50%", "65%"],
        type: "pie",
        label: {
            normal: {
                show: false,
            },
            emphasis: {
                show: false,
            },
        },
        labelLine: {
            normal: {
                show: false,
            },
            emphasis: {
                show: false,
            },
        },
        animation: false,
        tooltip: {
            show: false,
        },
        data: [
            {
                value: 1,
                itemStyle: {
                    color: "rgba(250,250,250,0.3)",
                },
            },
        ],
    }

    const obj2 = {
        name: "外边框",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ["50%", "65%"],
        radius: ["65%", "65%"],
        label: {
            normal: {
                show: false,
            },
        },
        data: [
            {
                value: 9,
                name: "",
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: "#0b5263",
                    },
                },
            },
        ],
    }
    const pie1Data = [
        { name: '洪英妹', value: 10 },
        { name: '薛安琪', value: 10 },
        { name: '陈静语', value: 8 },
        { name: '邓雪萍', value: 9 },
        { name: '蔡梅花', value: 13 },
    ]
    const pie2Data = [
        { name: '欧文熙', value: 13 },
        { name: '黄淑榕', value: 15 },
        { name: '田鑫玲', value: 8 },
        { name: '李鼎炜', value: 11 },
        { name: '蔡婷婷', value: 7 },
    ]
    const pie3Data = [
        { name: '余添招', value: 15 },
        { name: '林明雪', value: 14 },
        { name: '黄思菡', value: 13 },
        { name: '张冉冉', value: 10 },
        { name: '黄丽君', value: 8 },
    ]
    const pie4Data = [
        { name: '陈智勇', value: 10 },
        { name: '李静', value: 14 },
        { name: '李舒媛', value: 13 },
        { name: '陈奕', value: 12 },
        { name: '陈佳怡', value: 8 },
    ]
    const option1 = {
        color: ["#00ffff", "#00cfff", "#006ced", "#ffe000", "#ffa800", "#ff5b00", "#ff3000"],
        title: {
            text: "第一组",
            textStyle: {
                color: "#fff",
                fontSize: 10,
            },
            x: "center",
            y: "60%",
        },
        legend: {
            show: true,
            top: 5,
            left: 'center',
            textStyle: {
                color: "#f2f2f2",
                fontSize: 10,
            },
            itemWidth: 10,
            itemHeight: 10,
            data: pie1Data
        },
        tooltip: {
            show: true
        },
        series: [
            // 主要展示层的
            {
                radius: ["30%", "61%"],
                center: ["50%", "65%"],
                type: "pie",
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 10,
                            color: "#fff"
                        },
                        position: "outside",
                    },
                    emphasis: {
                        show: true,
                    },
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 5,
                        length2: 5,
                    },
                    emphasis: {
                        show: true,
                    },
                },
                name: "",
                data: pie1Data
            },
            obj1,
            obj2
        ],
    };
    const option2 = {
        color: ["#00ffff", "#00cfff", "#006ced", "#ffe000", "#ffa800", "#ff5b00", "#ff3000"],

        title: {
            text: "第二组",
            textStyle: {
                color: "#fff",
                fontSize: 10,
            },
            x: "center",
            y: "60%",
        },
        legend: {
            show: true,
            top: 5,
            left: 'center',
            textStyle: {
                color: "#f2f2f2",
                fontSize: 10,
            },
            itemWidth: 10,
            itemHeight: 10,
            data: pie2Data
        },
        tooltip: {
            show: true
        },
        series: [
            // 主要展示层的
            {
                radius: ["30%", "61%"],
                center: ["50%", "65%"],
                type: "pie",
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 10,
                            color: "#fff"
                        },
                        position: "outside",
                    },
                    emphasis: {
                        show: true,
                    },
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 5,
                        length2: 5,
                    },
                    emphasis: {
                        show: true,
                    },
                },
                name: "",
                data: pie2Data
            },
            obj1,
            obj2
        ],
    };
    const option3 = {
        color: ["#00ffff", "#00cfff", "#006ced", "#ffe000", "#ffa800", "#ff5b00", "#ff3000"],
        title: {
            text: "第三组",
            textStyle: {
                color: "#fff",
                fontSize: 10,
            },
            x: "center",
            y: "60%",
        },
        legend: {
            show: true,
            top: 5,
            left: 'center',
            textStyle: {
                color: "#f2f2f2",
                fontSize: 10,
            },
            itemWidth: 10,
            itemHeight: 10,
            data: pie3Data
        },
        tooltip: {
            show: true
        },
        series: [
            // 主要展示层的
            {
                radius: ["30%", "61%"],
                center: ["50%", "65%"],
                type: "pie",
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 10,
                            color: "#fff"
                        },
                        position: "outside",
                    },
                    emphasis: {
                        show: true,
                    },
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 5,
                        length2: 5,
                    },
                    emphasis: {
                        show: true,
                    },
                },
                name: "",
                data: pie3Data
            },
            obj1,
            obj2
        ],
    };
    const option4 = {
        color: ["#00ffff", "#00cfff", "#006ced", "#ffe000", "#ffa800", "#ff5b00", "#ff3000"],
        title: {
            text: "第四组",
            textStyle: {
                color: "#fff",
                fontSize: 10,
            },
            x: "center",
            y: "60%",
        },
        legend: {
            show: true,
            top: 5,
            left: 'center',
            textStyle: {
                color: "#f2f2f2",
                fontSize: 10,
            },
            itemWidth: 10,
            itemHeight: 10,
            data: pie4Data
        },
        tooltip: {
            show: true
        },
        series: [
            // 主要展示层的
            {
                radius: ["30%", "61%"],
                center: ["50%", "65%"],
                type: "pie",
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 10,
                            color: "#fff"
                        },
                        position: "outside",
                    },
                    emphasis: {
                        show: true,
                    },
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 5,
                        length2: 5,
                    },
                    emphasis: {
                        show: true,
                    },
                },
                name: "",
                data: pie4Data
            },
            obj1,
            obj2
        ],
    };
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
    });
})();




(function () {
    var myChart = echarts.init(document.getElementById('three_echarts'));
    const xData = ["蔡梅花", "余添招", "欧文熙", "黄淑榕", "薛安琪"]
    const yData = [8, 8, 8, 7, 6]
    const option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        grid: {
            left: 15,
            top: 10,
            right: 15,
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            show: false,
            type: "value",
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: 15
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: xData,
            },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 15,
                    },
                },
                data: yData,
            },
        ],
        series: [
            {
                name: "金额",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "rgb(57,89,255,1)",
                            },
                            {
                                offset: 1,
                                color: "rgb(46,200,207,1)",
                            },
                        ]),
                    },
                },
                barWidth: 10,
                data: yData,
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

(function () {
    var list = document.getElementById('list');
    var list2 = document.getElementById('list2');
    var rule = document.getElementById('rule');
    const dataOne = ["第1组", "第1组", "第1组", "第1组", "第1组", "第2组", "第2组", "第2组", "第2组", "第2组", "第3组", "第3组", "第3组", "第3组", "第3组", "第4组", "第4组", "第4组", "第4组", "第4组"]
    const dataTwo = ["洪英妹", "薛安琪", "陈静语", "邓雪萍", "蔡梅花", "欧文熙", "黄淑榕", "田鑫玲", "李鼎炜", "蔡婷婷", "余添招", "林明雪", "黄思菡", "张冉冉", "黄丽君", "陈智勇", "李静", "李舒媛", "陈奕", "陈佳怡"]
    const dataThree = ["+2", "+3", "+3", "+3", "+3", "+5", "+5", "+5", "+5", "+5", "+3", "+3", "+3", "+3", "+3", "+4", "+4", "+4", "+4", "+4"]
    const htmlArr = []
    dataOne.map((item, index) => {
        htmlArr.push(`<div><span>${dataOne[index]}</span><span>${dataTwo[index]}</span>
        <span style="color: #4bd8ba; font-weight:900">${dataThree[index]}</span>
        </div>`)
    })
    list.innerHTML = htmlArr
    list2.innerHTML = list.innerHTML;
    var speed = 50;
    function Marquee() {
        if (list2.offsetTop - rule.scrollTop <= 0)
            rule.scrollTop -= list.offsetHeight;
        else {
            rule.scrollTop++;
        }
    }
    var MyMar = setInterval(Marquee, speed);
    rule.addEventListener('mouseover', function () {
        clearInterval(MyMar)
    });
    rule.addEventListener('mouseout', function () {
        MyMar = setInterval(Marquee, speed)
    });
})();